<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link rel="stylesheet" href="/asset/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/asset/modules/dtree/dtree.css">
    <link rel="stylesheet" href="/asset/modules/dtree/font/dtreefont.css">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center;">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" id="add">
                        添加根节点
                    </button>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form" lay-filter="form">
                        <div class="layui-form-item">
                            <ul id="dtree" class="dtree" data-id="0"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9" id="updatePage">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue" style="text-align: center"><h3>节点信息</h3></div>
                <div class="layui-card-body">
                    <div class="layui-form" lay-filter="form">

                        <div class="layui-form-item">
                            <label class="layui-form-label">上级部门</label>
                            <div class="layui-input-block">
                                <ul id="parentTree" class="dtree" data-id="0"></ul>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门名称<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门编码<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" name="code" class="layui-input" lay-verify="required" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序值</span></label>
                            <div class="layui-input-block">
                                <input type="text" name="sort" class="layui-input" autocomplete="off" placeholder="默认会自动计算">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建人</label>
                            <div class="layui-input-block">
                                <input type="text" name="createBy" class="layui-input" readonly autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="createTime" class="layui-input" readonly autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">更新人</label>
                            <div class="layui-input-block">
                                <input type="text" name="updateBy" class="layui-input" readonly autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">更新时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="updateTime" class="layui-input" readonly autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item" style="text-align: center">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit lay-filter="update" id="submit">
                                确认更新
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/asset/layui/layui.js"></script>
<script src="/my/fast.js"></script>
<script>
    layui.config({
        base: '/asset/modules/dtree/'
    }).use('dtree', () => {
        let $ = layui.$
        let form = layui.form
        let dtree = layui.dtree;

        // 接口地址
        let saveOrUpdate = UPMS_ADDRESS + '/sysDept/saveOrUpdate';
        let get = UPMS_ADDRESS + '/sysDept/get';
        let del = UPMS_ADDRESS + '/sysDept/delete';

        let deptTree = UPMS_ADDRESS + '/sysDept/deptTree';
        let addChild = UPMS_ADDRESS + '/sysDept/addChild';

        // 初始化,隐藏右侧面板
        $('#updatePage').hide()

        // 左侧树
        let dtreeNode = dtree.render({
            elem: '#dtree',// 树绑定的元素ID
            url: deptTree,// 默认请求为post,改为get会出问题
            skin: 'laySimple',// 树主题,theme,laySimple,layui
            line: true,// 开启树线
            checkbar: true,// 开启复选框
            checkbarType: "p-casc", // 复选框选中形式,all,no-all,p-casc,self,only
            menubar: true,// 开启顶部菜单栏
            menubarFun: {// 顶部菜单栏方法
                //删除节点
                remove: function (checkbarNodes) {
                    let ids = [];
                    $.each(checkbarNodes, (i, v) => {
                        ids.push(v.nodeId);
                    });
                    $.post(del, {ids: ids.toString()}, rs => {
                        if (rs.success) {
                            location.reload();
                        } else {
                            layer.msg(rs.msg);
                        }
                    })
                    return true;
                }
            },
            toolbar: true,// 开启右键工具栏
            toolbarShow: ["add"],// 右键工具栏方法
            toolbarFun: {// 右键工具栏方法
                // 新增一个子节点
                addTreeNode: function (treeNode, $div) {
                    $.ajax({
                        url: addChild,
                        type: "post",
                        data: JSON.stringify(treeNode),
                        contentType: 'application/json',
                        success: rs => {
                            if (rs.success) {
                                location.reload();
                            } else {
                                layer.msg(rs.msg);
                            }
                        },
                    });
                },
            },
            success: (data, ul, first) => {
                $('#add').click(() => {
                    layuiOpenFixSizeSubmitWindow('添加根节点', './add.html', '#add', false);
                })
            },
        });

        // 渲染右侧面板下拉树
        dtree.renderSelect({
            elem: "#parentTree",
            url: deptTree,
            skin: "laySimple",
            line: true,
            selectInputName: {
                nodeId: "pid",// 下拉树input的name
            },
            selectTips: "无" // 下拉树无默认值时的提示信息
        });

        // 左侧树节点单击事件
        dtree.on("node('dtree')", obj => {
            // 显示右侧面板
            $('#updatePage').show()

            let param = obj.param

            // 获取节点信息
            $.get(get, {id: param.nodeId}, rs => {
                if (rs.success) {
                    let data = rs.data;

                    // 显示提交按钮
                    $('#submit').show()
                    // 设置右侧面板下拉树的默认值
                    $('#parentTree').attr('data-value', data.pid);
                    // 重新加载右侧面板下拉树
                    dtree.reload("parentTree");

                    // 为表单赋值
                    form.val('form', data);

                    // 监听提交--update
                    form.on('submit(update)', obj => {
                        let field = obj.field;
                        // 当未选择父节点时，表示该节点将为根节点
                        if (!field.pid) {
                            field.pid = 0;
                        }
                        layuiSubmit(saveOrUpdate, {...data, ...obj.field}, null, () => {
                            location.reload();
                        });
                    });
                } else {
                    layer.msg(rs.msg);
                }
            });
        });

        // 点击任何地方关闭下拉
        $("body").on("click", event => {
            $("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
            $("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
        });

    });
</script>
</body>
</html>
